


skin edits

by chiqi



Category: No Fandom
Language: English
Status: Completed
Published: 2019-03-13
Updated: 2019-03-17
Packaged: 2019-11-16 17:01:09
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 3
Words: 1,789
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/18098456
Author URL: https://archiveofourown.org/users/chiqi/pseuds/chiqi
Summary: archive





	1. dark grey closer to black

**Author's Note:**

> I recommend using ArchiveOfOurOwn.org - Fonts & Tags by Athari @ userstyles. reading on pc was miserable before using this plugin. adjusts margins, tags, etc. very cool!  
> https://userstyles.org/styles/152660/archiveofourown-org-fonts-tags-ath ch 3 regards updating the source code to match fonts
> 
> • font,  
> edit skin > use wizard > Fonts and Whitespace > Font > 'Georgia', 'Georgia', 'Georgia', 'Georgia'  
> for extra points add two more georgias i dont know  
> • adjust font-size,  
> edit skin > use wizard > percent of browser font size > any value above 100 will make it larger, below is smaller. i like 115.

#outer .region,  
#footer .group,  
.post fieldset fieldset,  
fieldset fieldset {  
background: none;  
}

body,  
.group,  
.group .group,  
.region,  
.flash,  
fieldset,  
fieldset fieldset ul,  
form dl,  
textarea,  
#main .verbose legend,  
.verbose fieldset,  
.notice,  
ul.notes,  
input,  
textarea,  
table,  
th,  
td:hover,  
tr:hover,  
.symbol .question:hover,  
#modal,  
.ui-sortable li,  
.required .autocomplete,  
.autocomplete .notice,  
.system .intro,  
.comment_error,  
div.dynamic,  
.dynamic form,  
#ui-datepicker-div,  
.ui-datepicker table {  
background: #292929;  
color: #A1A1A1;  
border-color: #636363;  
outline: #333333;  
box-shadow: none;  
}

#header .actions a:hover,  
#header .actions a:focus,  
#header .dropdown:hover a,  
#header .open a,  
#header .menu,  
#small_login,  
#header .dropdown:hover .current + .menu,  
.group.listbox,  
fieldset fieldset.listbox,  
form blockquote.userstuff,  
input:focus,  
textarea:focus,  
li.relationships a,  
.group.listbox .index,  
.dashboard fieldset fieldset.listbox .index,  
#dashboard a:hover,  
th,  
#dashboard .secondary,  
.secondary,  
.thread .even,  
.system .tweet_list li,  
.ui-datepicker tr:hover {  
background: #3B3B3B;  
}

#header .dropdown .menu a:hover,  
#header .dropdown .menu a:focus,  
.splash .favorite li:nth-of-type(odd) a,  
.ui-datepicker td:hover,  
#tos_prompt .heading,  
#tos_prompt [disabled] {  
background: #292929;  
}

#outer,  
.javascript,  
.statistics .index li:nth-of-type(even),  
#tos_prompt,  
.announcement input[type="submit"] {  
background: #292929;  
}

#header ul.primary,  
#outer #footer,  
.toggled form {  
background: #782626;  
}

#header ul.primary,  
#footer,  
#dashboard ul,  
dl.meta,  
.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
form blockquote.userstuff,  
div.comment,  
li.comment,  
.toggled form,  
form dl dt,  
#inner .module .heading,  
.bookmark .status span,  
.splash .news li,  
.filters .group dt.bookmarker {  
border-color: #616161;  
}

.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
.wrapper,  
#dashboard .secondary,  
.secondary,  
form blockquote.userstuff,  
.thread .comment,  
.toggled form {  
box-shadow: 1px 1px 3px #000;  
}

#dashboard .current,  
.actions a:active,  
#outer .current,  
a.current,  
.current a:visited,  
span.unread,  
.replied,  
span.claimed,  
dl.index dd,  
.own,  
.draft,  
.draft .unread,  
.child,  
.unwrangled,  
.unreviewed,  
.ui-sortable li:hover {  
background: #292929;  
border-color: #555;  
box-shadow: -1px -1px 3px #000;  
}

input,  
textarea {  
box-shadow: inset 0 1px 2px #000;  
}

li.blurb,  
.blurb .blurb,  
.listbox .index,  
fieldset fieldset.listbox,  
.dashboard .listbox .index {  
box-shadow: inset 1px 1px 3px #000;  
}

#footer a:hover,  
#footer a:focus,  
.autocomplete .dropdown ul li:hover,  
li.selected,  
a.tag:hover,  
.listbox .heading a.tag:visited:hover,  
.symbol .question,  
.qtip-content {  
background: #E3E3E3;  
color: #111;  
}

.splash .favorite li:nth-of-type(odd) a:hover,  
.splash .favorite li:nth-of-type(odd) a:focus {  
background: #E3E3E3;  
color: #111;  
}

#header #greeting img,  
#header .heading a,  
#header .heading a:visited,  
#header .user a:hover,  
#header .user a:focus,  
#header .user .current,  
#header fieldset,  
#header form,  
#header p,  
#dashboard a:hover,  
.actions a:hover,  
.actions input:hover,  
.delete a,  
span.delete,  
span.unread,  
.replied,  
span.claimed,  
.draggable,  
.droppable,  
span.requested,  
a.work,  
.blurb h4 a:link,  
.blurb h4 img,  
.splash .module h3,  
.splash .browse li a:before,  
.required,  
.error,  
.comment_error,  
a.cloud7,  
a.cloud8,  
#footer .actions .secondary a,  
#tos_prompt .heading {  
color: #E3E3E3;  
}

#greeting .icon,  
#dashboard,  
#dashboard.own,  
.error,  
.comment_error,  
.LV_invalid,  
.LV_invalid_field,  
input.LV_invalid_field:hover,  
input.LV_invalid_field:active,  
textarea.LV_invalid_field:hover,  
textarea.LV_invalid_field:active,  
#header .actions .current,  
.qtip-content {  
border-color: #782626;  
}

a,  
a:link,  
a.tag,  
#header a,  
#header a:visited,  
#header .current,  
#header .primary .open a,  
#header .primary .dropdown:hover a,  
#header .primary .dropdown a:focus,  
#dashboard a,  
#dashboard .current,  
.heading,  
.group .heading,  
.filters dt a:hover {  
color: #E3E3E3;  
}

a:visited,  
.actions a:visited,  
.action a:link,  
.action a:visited,  
.listbox .heading a:visited,  
span.series .divider {  
color: #999;  
}

.actions a,  
.actions a:link,  
.action,  
.action:link,  
.actions input,  
input[type="submit"],  
button,  
.current,  
.actions label,  
#header .actions a,  
#header input[type="submit"],  
#header .search input[type="text"] {  
background: #555;  
border-color: #191919;  
color: #eee;  
box-shadow: 1px 1px 1px #000;  
text-shadow: none;  
}

.actions a:hover,  
.actions input:hover,  
#dashboard a:hover,  
#header .search input[type="text"]:hover,  
#header .search input[type="submit"]:hover,  
.actions a:focus,  
.actions input:focus,  
#dashboard a:focus,  
#header .search input[type="text"]:focus,  
#header .search input[type="submit"]:focus {  
color: #999;  
border-color: #999;  
box-shadow: inset 2px 2px 2px #000;  
}

.actions a:active,  
.current,  
a.current,  
.current a:visited {  
color: #e3e3e3;  
background: #555;  
border-color: #B1B1B1;  
box-shadow: inset 1px 1px 3px #333;  
}

.delete a,  
span.delete {  
box-shadow: -1px -1px 2px rgba(255,255,255.25);  
}

ul.required-tags,  
.bookmark .status span,  
.blurb .icon {  
opacity: 0.9;  
border: 0;  
}

#outer .group .heading,  
#header .actions a,  
#footer .secondary a,  
fieldset.listbox .heading,  
.userstuff .heading,  
.heading,  
.userstuff h2 {  
text-shadow: none;  
color: #E3E3E3;  
background: none;  
}

#header .actions a,  
fieldset fieldset,  
.mce-container button,  
.filters .expander {  
box-shadow: none;  
}

fieldset fieldset.listbox {  
outline: none;  
}

.mce-container input:focus {  
background: #B5B5B5;  
}

.announcement .userstuff a,  
.announcement .userstuff a:link,  
.announcement .userstuff a:visited:hover {  
color: #B5B5B5;  
}

.announcement .userstuff a:visited {  
color: #B5B5B5;  
}

.announcement .userstuff a:hover,  
.announcement .userstuff a:focus {  
color: #B5B5B5;  
}

.event.announcement .userstuff a,  
.filters .expander {  
color: #B5B5B5;  
}


	2. lighter grey closer to white

**Summary for the Chapter:**

> same concept as the last, mind the notes because they apply except background color and a new variable: asset color
> 
> BACKGROUND COLOR #DADADA  
> ASSET COLOR #AEAEAE  
> both of which are found in the same category @ skin wizard

CSS #header ul.primary,  
#footer,  
.autocomplete .dropdown ul li:hover,  
li.selected,  
a.tag:hover {  
background: #b35b6b;  
}

#header .heading a,  
#header .actions a:hover,  
#header .actions a:focus,  
#header .dropdown:hover a,  
#header .open a,  
#header fieldset,  
#header form,  
#header p,  
#dashboard a:hover,  
.actions a:hover,  
.actions input:hover,  
.delete a,  
span.delete,  
span.unread,  
.replied,  
span.claimed,  
.draggable,  
.droppable,  
span.requested,  
a.work,  
.blurb h4 a:link,  
.blurb h4 img,  
.system .latest h3,  
.system div.news h3,  
.system .tweets h3,  
.required,  
.error,  
a.cloud7,  
a.cloud8 {  
color: #b35b6b;  
}

#outer #header #greeting .icon,  
#dashboard.own,  
.error,  
.comment_error,  
#header ul.primary,  
.LV_invalid,  
.LV_invalid_field,  
input.LV_invalid_field:hover,  
input.LV_invalid_field:active,  
textarea.LV_invalid_field:hover,  
textarea.LV_invalid_field:active,  
#header .primary a,  
#header .primary .current,  
#header .primary input,  
#header .search input {  
border-color: #b35b6b !important;  
}

#header .menu a,  
#header .dropdown:hover .menu a {  
color: #111;  
}


	3. UserStyles code edit

**Summary for the Chapter:**

> from the mentioned extension to add compatibility for font (georgia, substitute 'gerogai' w/ whatever else)
> 
> only needed with extension to edit just hit the pencil thing in the ext button then paste this code in place of the other - works with either dark/light skin variant so ignore the link at the start of code - its there because all i intend to do is arrange font value
> 
> control f and replace georgia with font of choice if u hate serif
> 
> ofc credit @ Athari

/* Dark theme compatibility https://userstyles.org/styles/97658/dark-night-archive-of-our-own */  
/*:root {  
\--ath-override-theme: "dark";  
\--ath-override-box-border-color: #444;  
\--ath-override-box-shadow-color: transparent;  
\--ath-override-interface-font-color: #ccc;  
\--ath-override-required-tag-font-color: #ccc;  
\--ath-override-gray-text-color: #777;  
\--ath-override-tag-font-color: #eee;  
\--ath-override-tag-default-light: 25%;  
\--ath-override-tag-default-border-light: 15%;  
\--ath-override-tag-highlight-light: 45%;  
\--ath-override-tag-highlight-border-light: 25%;  
\--ath-override-tag-freeform-light: 35%;  
}*/

:root {  
/* Light theme */  
\--box-border-color: var(--ath-override-box-border-color, #bbb);  
\--box-shadow-color: var(--ath-override-box-shadow-color, rgba(0, 0, 8, 0.2));

/* Fonts */  
\--interface-font-family: Georgia,serif;  
\--interface-font-size: 14px;  
\--interface-font-color: var(--ath-override-interface-font-color, #222);  
\--summary-font-family: Georgia,serif;  
\--summary-font-size: 14px;  
\--summary-title-font-size: 16px;  
\--story-font-family: Georgia,serif;  
\--story-font-size: 18px;  
\--story-width: 45em;  
\--article-font-family: Georgia,serif;  
\--article-font-size: 14px;  
\--article-width: 65em;  
\--required-tag-font-size: 10px;  
\--required-tag-font-color: var(--ath-override-required-tag-font-color, #000);  
\--required-tag-width: 80px;  
\--required-tag-icon-width: 25px;  
\--tag-font-size: 13px;  
\--tag-width: 28em;  
\--gray-text-color: #888;

/* Tags */  
\--tag-font-color: var(--ath-override-tag-font-color, #000);  
\--tag-default-hue: 0;  
\--tag-default-sat: 40%;  
\--tag-default-light: var(--ath-override-tag-default-light, 85%);  
\--tag-default-border-light: var(--ath-override-tag-default-border-light, 70%);  
\--tag-highlight-sat: 50%;  
\--tag-highlight-light: var(--ath-override-tag-highlight-light, 75%);  
\--tag-highlight-border-light: var(--ath-override-tag-highlight-border-light, 60%);  
\--tag-freeform-sat: 0%;  
\--tag-freeform-light: var(--ath-override-tag-freeform-light, 92%);  
\--tag-warning-hue: 0;  
\--tag-relationship-hue: 180;  
\--tag-character-hue: 60;  
}

/* Fonts */  
body, .toggled form, .dynamic form, .secondary, .dropdown {  
font: var(--interface-font-size) var(--interface-font-family) !important;  
color: var(--interface-font-color) !important;  
}  
blockquote, pre {  
font: var(--summary-font-size) var(--summary-font-family) !important;  
}  
#main {  
font-size: inherit !important;  
}  
.admin, .news, .docs {  
font: var(--article-font-size) var(--article-font-family) !important;  
max-width: var(--article-width);  
}  
#workskin {  
font: var(--story-font-size) var(--story-font-family) !important;  
max-width: var(--story-width);  
}  
#workskin * {  
font-family: georgia !important;  
}  
form p.footnote {  
line-height: 1.5 !important;  
}

/* Alphabet: proper columns */  
.alphabet .listbox .index {  
columns: calc(var(--tag-width) + 40px);  
}  
.alphabet .listbox .index li {  
display: block !important;  
float: none !important;  
width: auto !important;  
margin: 0 !important;  
}

/* Work block: border */  
.blurb {  
padding: 5px 10px !important;  
border: solid 1px var(--box-border-color) !important;  
border-radius: 10px;  
box-shadow: 2px 2px 4px 0px var(--box-shadow-color) !important;  
}  
.blurb blockquote {  
text-align: left !important;  
}  
.blurb .notice {  
box-shadow: none !important;  
display: inline-block;  
}  
/* Work block: hide accessibility labels */  
.blurb .landmark {  
display: none !important;  
}  
/* Work block: expand icons of required tags & bookmark symbols and show descriptions */  
.blurb .required-tags {  
display: flex !important;  
flex-direction: column;  
flex-wrap: wrap;  
height: 60px;  
}  
.blurb .required-tags li, .required-tags a, .required-tags .text {  
position: static !important;  
width: auto !important;  
}  
.blurb .required-tags li {  
width: calc(var(--required-tag-width) + var(--required-tag-icon-width)) !important;  
}  
.blurb .required-tags li a > span {  
position: relative !important;  
}  
.blurb .required-tags li a > span .text {  
position: absolute !important;  
left: 25px; top: 0px;  
}  
.blurb .required-tags li a > span .text,  
.blurb .status a.symbol span .text,  
.blurb .status::after {  
display: table-cell !important;  
width: var(--required-tag-width) !important;  
padding: 0px 3px;  
vertical-align: middle;  
font: inherit !important;  
font-weight: normal !important;  
font-size: var(--required-tag-font-size) !important;  
line-height: calc(var(--required-tag-font-size) + 2px) !important;  
color: var(--required-tag-font-color) !important;  
overflow: hidden;  
}  
.blurb .status {  
display: flex !important;  
width: calc((var(--required-tag-width) + var(--required-tag-icon-width)) * 2) !important;  
}  
.blurb .status a.symbol {  
width: calc(var(--required-tag-width) + var(--required-tag-icon-width)) !important;  
}  
.blurb .status a.symbol span {  
position: relative;  
}  
.blurb .status a.symbol span .text {  
left: var(--required-tag-icon-width);  
}  
.blurb .status a.symbol span.rec .text::after {  
content: /*Rec*/"ommended bookmark";  
}  
.blurb .status .count {  
position: static !important;  
}  
.blurb .status::after {  
content: attr(title);  
}  
/* Work block: header */  
.blurb .heading {  
font-size: var(--summary-font-size) !important;  
font-family: inherit !important;  
color: var(--gray-text-color);  
}  
.blurb.work .heading,  
.blurb.bookmark .heading {  
margin-left: calc((var(--required-tag-width) + var(--required-tag-icon-width)) * 2 + 10px) !important;  
}  
.blurb h4.heading a {  
border: none !important;  
}  
.blurb h4.heading a:first-child {  
border: none !important;  
font-size: var(--summary-title-font-size) !important;  
padding: 0 10px 0 0;  
}  
.blurb h4.heading a:hover {  
text-decoration: underline;  
}  
.blurb h5.fandoms .tag {  
margin: 1px 3px 0 0 !important;  
}  
.blurb .datetime {  
font-size: var(--summary-font-size) !important;  
font-family: inherit !important;  
}  
/* Work block: footer */  
.blurb .stats dt {  
font: var(--interface-font-size) var(--interface-font-family) !important;  
color: var(--gray-text-color);  
}  
/* Work block: bookmark footer */  
.blurb .user {  
display: flex;  
flex-wrap: wrap;  
width: auto !important;  
margin: 0px -10px -5px -10px !important;  
padding: 5px 0px;  
border: none !important;  
border-top: solid 1px var(--box-border-color) !important;  
border-radius: 0 0 10px 10px;  
}  
.blurb .user *:not(.notes),  
.blurb .user *:not(.notes)::before {  
line-height: 1.4 !important;  
font-size: var(--summary-font-size) !important;  
font-family: inherit !important;  
vertical-align: top !important;  
}  
.blurb .user .heading:not(.landmark) {  
margin: 2px 10px !important;  
}  
.blurb .user .datetime {  
right: 10px !important;  
}  
.blurb .user blockquote {  
flex: 100%;  
margin: 2px 10px !important;  
}  
.blurb .user .meta.heading {  
display: none !important;  
}  
.blurb .user .meta.commas.tags::before {  
content: "with ";  
color: var(--gray-text-color);  
vertical-align: middle !important;  
margin: 0 0 0 5px !important;  
}  
.blurb .user .meta.commas:not(.tags)::before {  
content: "to";  
color: var(--gray-text-color);  
margin: 0 0 0 5px !important;  
}  
.blurb .user .meta.commas:not(.tags) {  
margin: 2px 5px !important;  
}  
.blurb .user .actions {  
flex: 100%;  
text-align: right;  
margin: 0 10px 0 0;  
}

/* Tags: no commas */  
.blurb .tags, .blurb h5.fandoms {  
font-size: 0 !important;  
}  
.blurb .tags *, .blurb h5.fandoms * {  
font-size: var(--tag-font-size) !important;  
}  
.warnings, .warning, .warnings strong {  
font-weight: normal;  
}  
.tags li::after {  
content: unset !important;  
}

/* Tags: colored rounded rectangles */  
.tag:not(.index):not(.profile) {  
\--tag-hue: var(--tag-default-hue);  
\--tag-sat: var(--tag-freeform-sat);  
\--tag-light: var(--tag-freeform-light);  
\--tag-border-light: var(--tag-default-border-light);  
display: inline-block;  
color: var(--tag-font-color) !important;  
background: hsl(var(--tag-hue), var(--tag-sat), var(--tag-light)) !important;  
border: solid 1px hsl(var(--tag-hue), var(--tag-sat), var(--tag-border-light)) !important;  
border-radius: 4px;  
box-shadow: 1px 1px 1px rgba(147, 147, 147, .1);  
white-space: nowrap;  
max-width: var(--tag-width);  
margin: 2px 0 !important;  
padding: 0 4px !important;  
overflow: hidden;  
text-overflow: ellipsis;  
vertical-align: middle;  
}  
.tag:not(.index):not(.profile):hover {  
\--tag-light: var(--tag-highlight-light);  
\--tag-border-light: var(--tag-highlight-border-light);  
color: var(--tag-font-color) !important;  
}  
.tags .warnings .tag, .tags.warning .tag {  
\--tag-hue: var(--tag-warning-hue);  
}  
.tags .relationships .tag, .tags.relationship .tag {  
\--tag-hue: var(--tag-relationship-hue);  
}  
.tags .characters .tag, .tags.character .tag {  
\--tag-hue: var(--tag-character-hue);  
}  
.tags .warnings .tag, .tags.warning .tag,  
.tags .relationships .tag, .tags.relationship .tag,  
.tags .characters .tag, .tags.character .tag {  
\--tag-sat: var(--tag-default-sat);  
\--tag-light: var(--tag-default-light);  
}  
.tags .warnings .tag:hover, .tags.warning .tag:hover,  
.tags .relationships .tag:hover, .tags.relationship .tag:hover,  
.tags .characters .tag:hover, .tags.character .tag:hover {  
\--tag-sat: var(--tag-highlight-sat);  
}


End file.
